<template>
	<view class="itemBox">
		<view v-for="(item,index) in list" :key="index" class="card" @click="todel(item)">
			<view class="left_box">
				<img :src="item.img" alt="">
			</view>
			<view class="right_box">
				<p class="title">{{item.title}} <span>{{item.sale_status}}</span></p>
				<p class="city">{{item.city}} <span>{{item.price}}</span></p>
				<p class="detail_text">室厅</p>
				<p class="type">
					<span v-for="(v,i) in item.tags" :key="i">{{v}}</span>
				</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["list"],
		data() {
			return {

			}
		},
		methods: {
			todel(item) {
				uni.navigateTo({
					url: `/pages/Detail/Detail?id=${item.id}&type=新房`
				})
			},
		}
	}
</script>

<style lang="scss">
	.itemBox {
		width: 100%;
		height: 100%;

		.card {
			width: 100%;
			display: flex;
			border-bottom: 1px solid #eee;
			margin: 0 0.5rem;

			.left_box {
				padding: 0.937472rem 0;

				img {
					width: 6.25rem;
					height: 4.6875rem;
				}
			}

			.right_box {
				padding: 0.937472rem 0;
				margin-left: 1rem;
				position: relative;
				flex: 1 1;

				p {
					line-height: 25px;
				}

				.title {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 14px;

					span {

						background-color: #094;
						color: #fff;
						padding: 0 0.29296rem;
						margin-left: 0.21972rem;
						border-radius: 0.29296rem;
						font-size: .615216rem;
					}
				}

				.city {
					font-size: 12px;
					color: #919191;

					span {
						float: right;
						color: #094;
						font-weight: bold;
						font-size: 15px;
						padding-right: 8px;
					}
				}

				.detail_text {
					font-size: 12px;
					color: #919191;
				}

				.type span {
					font-size: 12px;
					display: inline-block;
					padding: 3px;
					margin-right: 5px;
				}

				.type :nth-child(1) {
					background: #ffebef;
					color: #e24546;
				}

				.type :nth-child(2) {
					background: #e8eaf6;
					color: #6a79d5;
				}

				.type :nth-child(3) {
					background: #e0f7fa;
					color: #4f9859;
				}

				.type :nth-child(4) {
					background: #e0f7fa;
					color: #4f9859;
				}
			}
		}
	}
</style>
